<template>
    <div class="user_info">
        <img class="picture" :src="userInfo.picture" alt="">
        <div class="info">
            <h2 class="name">{{ userInfo.name }}</h2>
            <span class="introduction">{{ userInfo.signature }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type UserInfo from '@/components/home/type/userInfo'
import { ref } from 'vue';

const userInfo = ref<UserInfo>({
    name: "永恒末匕",
    signature: "如月之恒，如日之升。",
    picture: "https://static.xkbk.top/blive/portrait/default_portrait.jpg"
});

</script>


<style lang="less" scoped>
.user_info {
    display: flex;

    .picture {
        width: 65px;
        height: 65px;
        border-radius: 5px;
    }

    .info {
        margin-left: 15px;

        .name {
            font-size: 18px;
            font-weight: 600;
            color: var(--title-color);
        }

        .introduction {
            color: var(--content-color);
            font-size: 12px;
            margin-top: 15px;
            display: inline-block;
        }
    }
}
</style>


